<template>
  <div>
    <input type="text" v-model="username"> {{ username }} <br/>
    <button @click="add">加</button> {{ count }}<br/>
    <!-- 使用组件  短横线  大驼峰式 -->
    <Child msg="aaaaa"/>
  </div>
</template>

<script>
// 基于es6的模块化开发 https://es6.ruanyifeng.com/#docs/module#export-%E5%91%BD%E4%BB%A4
// 单个html文件中，定义组件需要使用template属性制定使用那一个模版
// vue的单文件组件中，不需要
import Child from './Child.vue'
export default {
  data () {
    return {
      username: '',
      count: 100
    }
  },
  components: {
    Child
  },
  methods: {
    add () {
      this.count += 10
    }
  }
}
</script>

<style>
  /* 可以给style 添加 lang属性，这个属性默认是css，可以是 less。scss。stylus
    也可以给style添加 scoped 属性，就是当前的样式只在该组件中是有效的
   */
</style>